<template>
  <div class="main_box">
    <CommonHeader title="重点考核指标"></CommonHeader>
    <div class="main_content">
      <div class="nav_wrap">
        <div class="tit">选择时间：</div>
        <div class="content" @click="showSelectDate">
          <div>{{ currentDate }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div class="quota_box">
        <div class="quota_item">
          <div class="head">
            <div class="tit">{{ query.quotaName }}</div>
            <div class="inx">
              <div class="num1" :class="formateSignage(query.signage)"><span class="title-name">排名</span> {{ query.position }} <span class="grey">名</span></div>
            </div>
          </div>
          <div class="info flex-around">
            <div v-for="item in query.dimensionArr" :Key="item.index">{{item.name}}：{{item.value}}</div>
          </div>
          <div class="footer">
            <div class="footer-text">截至{{ sliceDate(query.issueNo) }}</div>
          </div>
        </div>
      </div>
      <div class="quota_box">
        <div class="quota_box_title help">
          <div>排名趋势</div>
          <div class="btn" @click="askHelp" v-show="query.level != 2">
            <div>请求</div>
            <div>支持</div>
          </div>
        </div>
        <div style="width: auto;height: 262px;border-radius:8px;" id="main"></div>
      </div>
      <div class="quota_box">
        <div class="quota_box_title">排名情况</div>
        <div class="rank-content">
          <div class="rank-content-head flex-around">
            <div>月份</div>
            <div>责任领导</div>
            <div>排名</div>
          </div>
          <div class="rank-content-box">
            <div class="rank-content-list flex-around" v-for="item in rankList" :key="item.index">
              <div class="rank-content-list-left">{{item.data}}</div>
              <div class="rank-content-list-mid"><span v-for="obj in item.empList" :key="obj.index">{{ obj }}  </span></div>
              <div class="rank-content-list-right" :class="formateSignage(item.signage)">{{item.position}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="dateShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :default-index="5" :columns="yearList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader'
export default {
  name: "quotaDetail",
  components: {
    CommonHeader
  },
  data() {
    return {
      currentDate:'',
      query:{},
      currentQuota:{},
      dateShow:false,
      rankList:[],
      branList:[],
      yearList:[]
    }
  },
  computed:{
    formateSignage(){
      return function(id){
        switch(id){
          case '0':
            return 'green'
          case '1':
            return 'red'
          default:
            return  ''
        }
      }
    },
    sliceDate(){
      return function(date){
        if(date && date.length >= 7){
          return date.slice(0,7)
        }else{
          return ''
        }
      }
    }
  },
  created() {
    this.query = this.$route.query
    const year = new Date().getFullYear()
    this.currentDate = this.$route.query.year || year
    this.initYearList()
    this.initData()
  },
  methods: {
    initYearList(){
      this.currentDate = parseInt(this.currentDate)
      this.yearList = [this.currentDate - 5,this.currentDate - 4,this.currentDate - 3,this.currentDate - 2,this.currentDate - 1,this.currentDate,this.currentDate +1,this.currentDate +2]
    },
     showSelectDate(){
        this.dateShow = true
    },
    onConfirm(params){
        this.currentDate = params
        this.dateShow = false
        this.initData()
    },
    cancel(){
        this.dateShow = false
    },
    initData(){
      const params = {
        _gp: "quota",
        _mt: "details",
        employId: this.query.employId,
        quotaId:this.query.quotaId,
        year:this.currentDate,
        areaId:this.query.areaId
      }
      this.$api.commonApi(params).then(res=>{
        if(res.errno === 200){
          const filterArr = res.data.rankList.filter(item=>{
            return item.position > 0
          })
          let index = 0
          if(filterArr.length > 0){
            for(let i in res.data.rankList){
              if(res.data.rankList[i].data === filterArr[filterArr.length-1].data){
                index = parseInt(i) + 1
              }
            }
          }
          this.rankList = res.data.rankList.slice(0,index)
          this.branList = res.data.branArray.map(item=>{
            if(item > 0){
              return item
            }else{
              return undefined
            }
          })
          let dimensionArr = []
          if(res.data.dimension){
            const dimension = res.data.dimension.slice(2,-2)
            const arr = dimension.split(',')
            for(let i in arr){
              let obj = {
                name:arr[i].split(':')[0].split('"')[1],
                value:arr[i].split(':')[1].split('"')[1]
              }
              dimensionArr.push(obj)
            }
          }
          this.currentQuota = {
            quotaName:res.data.quotaName || '',
            position:res.data.position || '',
            closingDate:res.data.closingDate || '',
            dimensionArr:dimensionArr
          }
          this.echartsInit()
        }else{
          this.rankList = []
          this.branList = []
          this.echartsInit()
        }
      })
    },
    echartsInit() {
      this.$echarts.init(document.getElementById('main')).setOption({
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false,  //刻度线
          },
          axisLine: {
            show: true, //修改x轴颜色
            lineStyle: {
              color: '#DCE0E6',
            },
          },
          axisLabel: {
            show: true, //修改刻度值
            color: '#606C86',
            interval:0,
            rotate:30
          },
        },
        yAxis: {
          type: 'value',
          max:14,
          min:0,
          inverse:true,
          axisTick: {
            show: false,  //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        legend: {
          top: '5%',
          right: '5%',
          itemWidth: 15,
          itemHeight: 8,
          data: [
            {icon: 'rect', name: '排名'},
          ],
        },
        series: [{
          data: this.branList,
          type: 'line',
          name:'排名',
          lineStyle: {
            color: "#355EEC"
          },
          label:{
            show:true,
            // offset:[10,0],
            width:20,
            height:20,
            borderRadius:[20,20],
            align:'center',
            verticalAlign:'center',
            color:'#355EEC',
            backgroundColor:'#EAEEFD'
          },
          symbolSize: 1,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          },
        }],
      })
    },
    askHelp(){
      // 清空之前的支援人
      sessionStorage.removeItem('persons')
      this.$router.push({
        path:'/askHelp',
        query:{
          ...this.query
        }
      })
    }
  }
}
</script>

<style scoped>
.main_box{
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_content{
  padding:10px 15px;
  box-sizing: border-box;
  text-align: left;
  background-color: #f4f5fa;
}
.nav_wrap{
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nav_wrap .tit{
  width: 100px;
  font-size:14px;
  color:#999;
}
.nav_wrap .content{
  width: 100%;
  font-size:14px;
  color:#333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down{
  width: 15px;
  height: 8px;
  background: url("../../assets/image/down.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  left:10px;
  top:5px;
}
.quota_box{
  margin-top: 15px;
}
.quota_item{
  width: 100%;
  background-color: #fff;
  border-radius:8px;
  margin-bottom: 10px;
  text-align: left;
  padding:10px 15px;
  box-sizing: border-box;
}
.quota_item .head{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom:1px solid #efefef;
  padding-bottom: 10px;
}
.quota_item .head .tit {
  max-width: 200px;
  height: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  border-left: 4px solid #367fff;
  padding-left: 10px;
  box-sizing: border-box;
}
.quota_item .head .inx{
  display: flex;
}
.quota_item .head .num1{
  font-size: 24px;
  color:#4ca5f1;
  font-weight: bold;
  margin-right: 10px;
}
.quota_item .head .num1 .grey{
  color:#bcc0c7;
  font-size:13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item .head .num1.red{
  color:#e43c26;
}
.quota_item .head .num1.green{
  color:#5bc55a;
}
.quota_item .head .num1 .title-name{
  color:#bcc0c7;
  font-size:13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item .info{
  font-size: 13px;
  color: #A3A7AD;
  margin-top: 16px;
}
.quota_item .footer .footer-text{
  color: #D3D7E0;
  font-size: 12px;
  margin-top: 8px;
}

/deep/ .resetPicker .van-picker__columns .van-picker-column:nth-child(2){
  display: none;
}
.quota_box_title{
  font-size: 13px;
  color: #333333;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 16px;
}
.quota_box_title.help{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}
.quota_box_title.help .btn{
  position: fixed;
  right:15px;
  top:220px;
  width: 56px;
  height: 56px;
  background-color: #F60E36;
  border-radius: 50%;
  font-weight: normal;
  font-size:12px;
  color:#fff;
  border:2px solid #fff;
  box-sizing: border-box;
  padding:9px 13px;
  cursor: pointer;
  z-index:9999;
}
.rank-content{
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
.rank-content-head{
  padding: 0 16px;
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #A6A9B3;
  background: #F5F7FB;
  box-sizing: border-box;
}
.rank-content-head > div:first-child{
  width: 30%;
}
.rank-content-head > div:last-child{
  width: 20%;
  text-align: center;
}
.rank-content-head > div:nth-child(2){
  width: 50%;
  text-align: center;
}
.rank-content-list{
  margin-top: 16px;
  padding: 0 16px;
  box-sizing: border-box;
}
.rank-content-list-left{
  width: 30%;
}
.rank-content-list-mid{
  width: 50%;
  text-align: center;
}
.rank-content-list-right{
  width: 20%;
  text-align: center;
}
.rank-content-list-left,.rank-content-list-mid{
  font-size: 13px;
  color: #666;
}
.rank-content-list-right{
  font-size: 13px;
  color: #4180F2;
  font-weight: bold;
}
.rank-content-list-right.red{
  color: #F60E36;
}
.rank-content-list-right.green{
  color: #5BC55A;
}
#main {
  background: #fff;
}
.btn_box >>> .van-button{
    width: 90%;
    margin-top: 20px;
}
</style>